<template>
    <div class="container">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <img class="avatar" src="../assets/avatar.jpg" alt="">
          <el-form-item label="用户名" prop="username">
            <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {adminLogin} from '@/request'
import {setCookie} from '@/utils/cookie'
export default {
    data () {
      return {
        ruleForm: {
          username: 'cuihua',
          password: '123123'
        },
        rules: {
          username: [
            { validator: this.checkuser, trigger: 'blur' }
          ],
          password: [
            { validator: this.checkpass, trigger: 'blur' }
          ]
        }
      };
    },
    mounted() {
      document.documentElement.style.height = document.body.style.height = app.style.height = '100%'
    },
    methods: {
      checkuser(rule, value, callback) {
        let userReg = /^[a-zA-Z1-9]{4,10}$/
        if(!userReg.test(value)) {
          callback(new Error('用户名数字字母组成4~10位！'));
        } else {
          callback();
        }
      },
      checkpass(rule, value, callback) {
        let userReg = /^.{6,12}$/
        if(!userReg.test(value)) {
          callback(new Error('密码6~12位！'));
        } else {
          callback();
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (!valid) {
            this.$message({
              type: 'error',
              message: '请输入正确的账号和密码！',
              duration: 1500,
            });
            return false;
          }
          // 发请求
          adminLogin({
            username: this.ruleForm.username,
            password: this.ruleForm.password
          }).then(data => {
            // console.log(data);
            let {msg, error_code} = data
            if(error_code === 200){
              setCookie('adminname', this.ruleForm.username, 7200)
              setCookie('adminId', data.data.userId, 7200)
              localStorage.setItem('adminToken', data.data.token)
              this.$store.commit('changeLoginStatus')
              // console.log(data);
              let that = this
              this.$message({
                type: 'success',
                message: msg,
                duration: 1500,
                onClose: () => {
                  that.$router.push('/home')
                }
              })
            }
          })
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style lang="scss" scoped>
    .container{
      background-color: #0769b4;
      height: 100%;
    }
    .el-form{
      width: 500px;
      padding-top: 50px;
      height: 210px;
      background-color: #eee;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 5px;
    }
    .avatar{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -50px;
      z-index: 2; 
      border: 1px solid #fff;
    }
    .el-input{
      width: 90%;
    }
</style>
